<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/httpVueLoader.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-show="isLogged!==null">
				<!-- navigation -->
				<div class="app-header">
					<nav class="navbar navbar-default navbar-inverse" role="navigation">
						<div class="container-fluid">
							<div class="navbar-header">
								<a href="#" class="navbar-brand" @click="handleChangeView('main_view')">仁爱招聘网</a>
							</div>
							<!-- 管理员 -->
							<div class="collapse navbar-collapse navbar-left" id="example-navbar-collapse" v-if="sysUser.permission===0">
								<ul class="nav navbar-nav">
									<li><a href="#" @click="handleChangeView('enterprise_manage')">企业管理</a></li>
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">用户管理</a>
										<ul class="dropdown-menu">
											<li><a href="#">用户管理</a></li>
											<li class="divider"></li>
											<li><a href="#">添加用户</a></li>
										</ul>
									</li>
								</ul>
							</div>
							<!-- 企业 -->
							<div class="collapse navbar-collapse navbar-left" id="example-navbar-collapse" v-else-if="sysUser.permission===1">
								<ul class="nav navbar-nav">
									<li><a href="#" @click="handleChangeView('enterprise_info')">企业信息完善</a></li>
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">职位管理</a>
										<ul class="dropdown-menu">
											<li><a href="#">职位管理</a></li>
											<li class="divider"></li>
											<li><a href="#">添加职位</a></li>
										</ul>
									</li>
									<li><a href="#">简历管理</a></li>
								</ul>
							</div>
							<!-- 求职者 -->
							<div class="collapse navbar-collapse navbar-left" id="example-navbar-collapse" v-else-if="sysUser.permission===2">
								<ul class="nav navbar-nav">
									<li><a href="#">浏览职位</a></li>
									<li><a href="#">简历编辑</a></li>
									<li><a href="#">职位收藏</a></li>
									<li><a href="#">投递情况</a></li>
								</ul>
							</div>
							<ul class="nav navbar-nav navbar-right">
								<li>
									<a href="#" @click="dologout()">
										<span class="glyphicon glyphicon-user"></span>
										欢迎您，<span>{{sysUser.username}}</span>
									</a>
								</li>
							</ul>
						</div>
					</nav>
				</div>

				<!-- main container -->
				<div id="main-container" class="container-fluid">
					<component :is="main_view" style="width: 100%;"></component>
				</div>
			</div>
			<div v-show="isLogged===null">
				<!-- 登录 -->
				<div class="modal" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title" id="editModalLabel">登录</h4>
							</div>
							<div class="modal-body">
								<div class="form-group">
									<label for="logUsername">用户名</label>
									<input type="text" class="form-control" id="logUsername" placeholder="请输入用户名" v-model="logInfo.username">
								</div>
								<div class="form-group">
									<label for="logPassword">密码</label>
									<input type="password" class="form-control" id="logPassword" placeholder="请输入密码" v-model="logInfo.password">
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">注册新用户</button>
								<button type="button" class="btn btn-primary" @click="login()">登录</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>



	<script>
		let vm = new Vue({
			el: '#app',
			components: {
				'main_view': httpVueLoader('main.vue'),
				'enterprise_info': httpVueLoader('EnterpriseInfo.vue'),
				'enterprise_manage':httpVueLoader('EnterpriseManage.vue'),
			},
			data: {
				main_view: 'main_view',
				username: '',
				isLogged: localStorage.getItem('x-auth-token'),
				logInfo: {
					username: '',
					password: ''
				},
				sysUser: {
					permission: 2,
					username: ''
				},
				
			},
			mounted() {
				//test
				this.main_view = 'enterprise_manage';
				let token = localStorage.getItem("x-auth-token");
				if (token !== null && token !== undefined && token.trim() !== "") {
					//logged
					this.isLogged === true;
					this.sysUser = JSON.parse(localStorage.getItem('sysUser'));
				} else {
					this.isLogged === false;
					$('#editModal').modal();
				}

			},
			methods: {
				//切换组件用
				handleChangeView: function(componentName) {
					this.main_view = componentName;
				},
				login() {
					$.ajax({
						url: conf.ur + "/doLogin",
						type: 'post',
						dataType: 'json',
						data: JSON.stringify({
							"username": this.logInfo.username,
							"password": this.logInfo.password
						}),
						headers: {
							"Content-Type": "application/json"
						},
						success: (data) => {
							console.log(JSON.stringify(data))
							let sysUser = data.sysUser;
							if (sysUser === null) {
								alert("用户名或密码错误！");
								return;
							} else {
								conf.storage.setItem('x-auth-token', sysUser.token);
								conf.storage.setItem('sysUser', JSON.stringify(sysUser));
								window.location.reload();
							}
						},
						error: (err) => {
							console.log("网络异常！")
						}
					});
				},
				dologout() {
					console.log(conf.ur + "/logout")
					$.ajax({
						url: conf.ur + "/logout",
						type: 'get',
						headers: {
							"Content-Type": "application/json",
							"x-auth-token": window.localStorage.getItem('x-auth-token')
						},
						success: (data) => {
							localStorage.clear();
							window.location.reload();
						},
						error: (err) => {
							console.log(JSON.stringify(err))
							console.log("网络异常！")
						}
					});
				},
			}
		})
	</script>

	<style>
		html,
		body {
			height: 100%;
			margin: 0px;
			padding: 0px;
		}

		#app {
			background-color: #999;
			height: 100%;
		}

		.app-header {
			background-color: #85d989;
			width: 100%;
			height: 50px;
		}

		#main-container {
			background-color: ghostwhite;
			width: 100%;
			position: absolute;
			top: 50px;
			bottom: 0px;
			left: 0px;
		}

		.jumbotron {
			background-color: ghostwhite;
		}
	</style>
</html>
